$mobileSidebarWidth = 50%

// narrow desktop / iPad
@media (max-width: $MQNarrow)
  .sidebar
    font-size 15px
    width $mobileSidebarWidth
  .page
    padding-left $mobileSidebarWidth

// wide mobile
@media (max-width: $MQMobile)
  .sidebar
    top 0
    padding-top $navbarHeight
    transform translateX(200%)
    transition transform .2s ease
  .page
    padding-left 0
  .theme-container
    &.sidebar-open
      .sidebar
        transform translateX(100%)
    &.no-navbar
      .sidebar
        padding-top: 0

// narrow mobile
@media (max-width: $MQMobileNarrow)
  .content.custom
    font-size 11px !important !important
    blockquote
       padding 2px 10px !important
       margin 1em 0 1em 0 !important
  h1
    font-size 1.9rem
  h2
    font-size 16px
    padding-top 2em !important
    margin-top -1.4em !important
  h3
    padding-top 10px !important
    margin-top 0 !important
    margin-bottom 10px !important
  p
    font-size 11px !important
  blockquote
    font-size 11px !important
  code
    font-size 11px !important
  li
    font-size 11px
    margin-left 5px
  ol
    padding-inline-start 5px !important
  .mb-3
    margin-bottom 0 !important
  .mt-3
    margin-top 0 !important
  .display-1
    font-size  19px !important
    font-weight: 500;
    line-height: 20px !important;
    padding 3px
    margin-left 5px
  .hidden-xs-only
    display block !important
    font-weight 300
    font-size 12px !important
    word-break break-all !important
  .text-xs-right
    display flex !important
  .post-nav.btn
    width 115% !important
  div.btn__content
    white-space normal !important
  span.katex
    white-space normal !important
    font-size 12px
  .secondary--text
    font-size 12px
    padding 3px
    margin-left 5px
  .card__title
    padding 1px
  .title_views
    font-size 12px
  .blog-footer
    font-size 11px !important
  .gt-container .gt-meta
    font-size 11px !important
  .gt-container .gt-comment-header
    font-size 12px !important
  .gt-container .gt-header-textarea
    font-size 11px !important
  .gt-container .gt-btn
    font-size 11px !important
  .content.custom pre, .content.custom pre[class*="language-"]
    margin-left -0.46em !important
    margin-right -0.46em !important
  .content
    div[class*="language-"]
      margin 0.85rem -1.5rem
      border-radius 0